<template>
    <div class="app-container divCon">
        <!-- 查询管理 -->
        <div class="hospitalPayMent">
            <!-- 查询模块 -->
            <el-form :model="form" ref="form" label-width="130px" :inline="true">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="回款单号">
                            <el-input v-model="form.repaymentSn" placeholder="请输入回款单号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="客户姓名">
                            <el-input v-model="form.userName" placeholder="请输入客户姓名"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="客户手机号">
                            <el-input
                                v-model="form.userPhone"
                                placeholder="请输入客户手机号"
                                @keyup.enter.native="search"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="是否逾期">
                            <el-select v-model="form.isExceed" placeholder="请选择">
                                <el-option
                                    :label="item.name"
                                    :value="item.value"
                                    v-for="(item,index) in overdueList"
                                    :key="index"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" class="alignRight">
                        <el-button type="primary" class="searchBtn" @click="handleSearch">查询</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <!-- 主页列表 -->
        <p class="spanToInput titleInfo">提示：列表中标红的单据为逾期未回款的单据，必须勾选才可提交，否则无法提交</p>
        <div class="listDiv" v-loading="tableLoading">
            <!-- table列表 -->
            <el-table :data="tableData" height="460" ref="itsmDataTable" border style="width:100%">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column fixed type="index" width="50" label="序号">
                    <template slot-scope="scope">
                        <div
                            :class="scope.row.exceedDays>7&&scope.row.isGrace=='0'?'active':''"
                        >{{scope.$index+1}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="orderSn" label="流水单号">
                    <template slot-scope="scope">
                        <div
                            :class="scope.row.exceedDays>7&&scope.row.isGrace=='0'?'active':''"
                        >{{scope.row.orderSn}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="repaymentSn" label="回款单号">
                    <template slot-scope="scope">
                        <div
                            :class="scope.row.exceedDays>7&&scope.row.isGrace=='0'?'active':''"
                        >{{scope.row.repaymentSn}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="userName" label="客户姓名">
                    <template slot-scope="scope">
                        <div
                            :class="scope.row.exceedDays>7&&scope.row.isGrace=='0'?'active':''"
                        >{{scope.row.userName}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="userPhone" label="客户手机号">
                    <template slot-scope="scope">
                        <div
                            :class="scope.row.exceedDays>7&&scope.row.isGrace=='0'?'active':''"
                        >{{scope.row.userPhone}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="consultantName" label="咨询师姓名">
                    <template slot-scope="scope">
                        <div
                            :class="scope.row.exceedDays>7&&scope.row.isGrace=='0'?'active':''"
                        >{{scope.row.consultantName}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="receivableAmount" label="应回款金额">
                    <template slot-scope="scope">
                        <div
                            :class="scope.row.exceedDays>7&&scope.row.isGrace=='0'?'active':''"
                        >{{scope.row.receivableAmount}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="receivedAmount" label="已回款金额">
                    <template slot-scope="scope">
                        <div
                            :class="scope.row.exceedDays>7&&scope.row.isGrace=='0'?'active':''"
                        >{{scope.row.receivedAmount}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="reviewAmount" label="审批中回款金额">
                    <template slot-scope="scope">
                        <div
                            :class="scope.row.exceedDays>7&&scope.row.isGrace=='0'?'active':''"
                        >{{scope.row.reviewAmount}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="surplusReceivableAmount" label="剩余回款金额">
                    <template slot-scope="scope">
                        <div
                            :class="{'active':scope.row.exceedDays>7&&scope.row.isGrace=='0'}"
                        >{{scope.row.surplusReceivableAmount}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="paidRatio" label="回款比率">
                    <template slot-scope="scope">
                        <div
                            :class="scope.row.exceedDays>7&&scope.row.isGrace=='0'?'active':''"
                        >{{Number(scope.row.paidRatio)}}%</div>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="回款状态">
                    <template slot-scope="scope">
                        <div
                            :class="scope.row.exceedDays>7&&scope.row.isGrace=='0'?'active':''"
                        >{{scope.row.status | statusTypes}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="createdAt" label="创建时间">
                    <template slot-scope="scope">
                        <div
                            :class="scope.row.exceedDays>7&&scope.row.isGrace=='0'?'active':''"
                        >{{scope.row.createdAt}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="isExceed" label="是否逾期">
                    <template slot-scope="scope">
                        <div
                            :class="scope.row.exceedDays>7&&scope.row.isGrace=='0'?'active':''"
                        >{{scope.row.isExceed | isExceedType}}</div>
                    </template>
                    <!-- <div
                            :class="{'active':scope.row.exceedDays>7&&scope.row.isGrace=='0'}"
                    >{{scope.row.isExceed | isExceedType}}</div>-->
                </el-table-column>
                <el-table-column prop="exceedDays" label="逾期天数">
                    <template slot-scope="scope">
                        <div
                            :class="scope.row.exceedDays>7&&scope.row.isGrace=='0'?'active':''"
                        >{{scope.row.exceedDays}}</div>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagesCon">
                <div>
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="form.pageNum"
                        :page-sizes="page_sizes"
                        :page-size="10"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="page_totals"
                    ></el-pagination>
                </div>
            </div>
            <!-- 提交按钮 -->
            <el-button type="primary" @click="submitFn()" class="submitBtn">确认</el-button>
            <el-button type="primary" @click="closeDialog()" class="submitBtn">取消</el-button>
        </div>
    </div>
</template>
<script>
import hospitalPay from "@/api/hospitalPay";
import phoneReg from "@/utils/validate";
import filters from "@/utils/filters";
export default {
    name: "receivableAdd",
    data() {
        return {
            checked: true,
            tableLoading: true,
            dates: [],
            // form表单
            form: {
                hospitalId:null,
                //回款单号
                repaymentSn: "",
                //客户姓名
                userName: "",
                // 客户手机
                userPhone: "",
                isExceed: "",
                pageNum: 1,
                pageSize: 10
            },
            // table列表
            tableData: [],
            // 分页数据
            page_sizes: [10, 30, 50, 100],
            page_totals: 60,
            // 是否逾期
            overdueList: [
                { name: "全部", value: "" },
                { name: "否", value: "0" },
                { name: "是", value: "1" }
            ],
            // 全局回款状态
            statusType: [],
            flagArr: [],
            redArr: []
        };
    },
    mounted() {
        this.form.hospitalId = String(this.$store.state.user.hospitalId)
        this.getList(this.form);
        this.statusType = filters.statusType("listReturn");
    },
    filters: {
        // 状态过滤
        statusTypes(e) {
            return filters.statusType(String(e));
        },
        // 是否逾期
        isExceedType(e) {
            switch (e) {
                case "0":
                    return "未逾期";
                case "1":
                    return "已逾期";
                default:
                    return "暂无";
            }
        }
    },
    inject: ["reload"],
    methods: {
        //清空选中
        emptySelect() {
            // this.$refs.itsmDataTable.clearSelection();
        },
        //获取列表
        getList(e) {
            hospitalPay
                .newAddReceiveList(e)
                .then(res => {
                    if (!res.data.code) {
                        let resData = res.data.data;
                        this.tableData = resData.list;
                        // this.tableData.forEach(e => {
                        //     for (let n in e) {
                        //         if (n == "surplusReceivableAmount") {
                        //             e[n] = Number(e[n]);
                        //         }
                        //     }
                        // });
                        // console.log(this.tableData)
                        this.page_totals = resData.count;
                        this.flagArr = [...this.tableData];
                        let arrs = [];
                        this.flagArr.map(e => {
                            for (let n in e) {
                                if (n === "exceedDays") {
                                    if (e[n] > 7) {
                                        arrs.push(e);
                                    }
                                }
                                if (n === "isGrace") {
                                    if (Number(e[n]) === 0) {
                                        arrs.push(e);
                                    }
                                }
                            }
                        });
                        const mapper = {};
                        const newArr = [];
                        for (let item of arrs) {
                            const { repaymentId } = item;
                            if (mapper[repaymentId]) {
                                newArr.push(item);
                            } else {
                                mapper[repaymentId] = true;
                            }
                        }
                        this.redArr = newArr;
                        this.toggleSelection(newArr);
                    } else {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                    this.tableLoading = false;
                })
                .catch(err => {
                    this.errorStatus(err);
                    this.tableLoading = false;
                });
        },
        // 默认选中标红数据
        toggleSelection(rows) {
            this.$nextTick(() => {
                rows.forEach(row => {
                    this.$refs.itsmDataTable.toggleRowSelection(row);
                });
            });
        },
        // 立即提交
        submitFn(e) {
            const selectData = this.$refs.itsmDataTable.selection;
            let flag = this.redArr.every(val => selectData.includes(val));
            if (flag) {
                this.$emit("closeDialog", selectData);
            } else {
                this.errorStatus("请将当前页标记为红色的回款单全部勾选");
            }
        },
        // 取消按钮
        closeDialog(){
            this.$emit("closeDialog",[]);
        },
        //弹窗组件
        eleMsg(txt, status) {
            this.$message({
                showClose: true,
                message: txt,
                type: status
            });
        },
        //成功状态弹窗
        succStatus(txt, status) {
            this.eleMsg(txt, "success");
        },
        //失败状态弹窗
        errorStatus(txt) {
            this.eleMsg(txt, "error");
        },
        // 警告状态弹窗
        warningStatus(txt) {
            this.eleMsg(txt, "warning");
        },
        // 路由跳转
        toRoutes(e, userId) {
            let route = { name: e, query: { userId: userId } };
            this.$router.push(route);
        },
        //改变页面条数
        handleSizeChange(val) {
            this.form.pageSize = val;
            this.getList(this.form);
        },
        //选择页数
        handleCurrentChange(val) {
            this.form.pageNum = val;
            this.getList(this.form);
        },
        //confirm框
        eleConfirm(e) {
            this.$confirm(e.desc, e.title, {
                confirmButtonText: e.confirmBtnTxt,
                cancelButtonText: e.cancelBtnTxt,
                type: "warning"
            })
                .then(() => {
                    e.fn();
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: e.catchInfo
                    });
                });
        },
        //iuput框的enter事件
        // 查询
        handleSearch() {
            this.getList(this.form);
        }
    }
};
</script>
<style scoped>
.pagesCon > div {
    float: right;
}
.app-container {
    padding: 0.1px !important;
}
.form {
    margin-left: 20px;
}
.elFormImg {
    width: 268px;
}
/* 分页 */
.pagesCon {
    height: 40px;
    margin-top: 20px;
}
/* 表单样式修改 */
.el-range-editor--medium.el-input__inner {
    width: 236px;
}
/* 提交按钮样式 */
.submitBtn {
    margin-top: 20px;
    margin-bottom: 20px;
}
/* 提示标题样式 */
.titleInfo {
    text-indent: 0;
    border-bottom: none;
    margin-bottom: 0;
}
.active {
    color: red;
}
/* .divCon{height: 100px;overflow: hidden;} */
</style>
